<template>
  <div
    class="playpage"
    v-if="listone.al"
    :style="{
      backgroundImage: 'url(' + listone.al.picUrl + ')',
      backgroundSize: '200% 200%',
      backgroundRepeat: 'no-repeat',
    }"
  >
    <audio
      v-show="false"
      :src="musicPath"
      controls
      @timeupdate="getCurr"
      @pause="is_stop = true"
      @play="is_stop = false"
      ref="audio"
      @canplay="showLong"
    ></audio>
    <header>
      <span @click="onClickLeft"><van-icon name="arrow-down" /></span>
      <div v-if="listone.ar">
        <p>{{ listone.name }}</p>
        {{ listone.ar[0].name }}
      </div>
      <span @click="onClickRight"><van-icon name="wap-nav" /></span>
    </header>

    <main>
      <div class="yuanyuan" v-show="yuanyuan">
        <img
          src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad="
          alt=""
          :class="{ rotate30: !suspend }"
        /><!--  -->
        <span v-if="listone.al" @click="yuanyuanclick"
          ><img
            :class="{ rotate360: showAnimate }"
            class="icon-iconfontshuaxin"
            :src="listone.al.picUrl"
            alt=""
        /></span>
        <p @click="yuanyuanclick">{{ currentlyrics }}</p>
      </div>
      <div class="lyricsdisplay" v-show="!yuanyuan" @click="yuanyuanclick">
        <p style="font-size: 20px">{{ lasttwo }}</p>
        <p style="font-size: 20px">{{ theprevious }}</p>
        <p class="currentshowlyrics">
          {{ currentlyrics }}
        </p>
        <p style="font-size: 20px">{{ nextsentence }}</p>
        <p style="font-size: 20px">{{ nexttwosentences }}</p>
      </div>
    </main>
    <div class="bottom">
      <!-- 点赞这一行 -->
      <ul class="likeicon">
        <li @click="fabulous">
          <van-icon name="like-o" v-if="!like" /><!-- 不喜欢 -->
          <van-icon name="like" v-if="like" style="color: red" /><!-- 喜欢 -->
        </li>
        <!-- 喜欢 -->
        <li><van-icon name="down" /></li>
        <!-- 下载 -->
        <li><van-icon name="gem-o" /></li>
        <!-- 唱歌 -->
        <li @click="tocomment"><van-icon name="chat-o" /></li>
        <!-- 评论 -->
        <li><van-icon name="wap-nav" /></li>
        <!-- 更多 -->
      </ul>
      <!-- 进度条 -->
      <div class="time">
        <span>{{ toTime(curr) }}</span
        ><!-- 当前播放时长 --><van-slider
          v-model="progress"
          active-color="#ee0a24"
          @change="changeLong"
        >
          <template #button>
            <div class="custom-button"></div>
          </template>
        </van-slider>
        <span v-if="toTime(duration)">{{ toTime(duration) }}</span
        ><!-- 歌曲总时长 -->
      </div>
      <!-- 最底部播放暂停相关 -->
      <ul class="bottom-ico">
        <li @click="loopplayback">
          <van-icon name="exchange" v-if="listloop" /><!-- 列表循环 -->
          <van-icon name="replay" v-if="sequentialcycle" /><!-- 顺序循环 -->
          <b v-if="oneloop">①</b
          ><!-- 单曲播放 -->
        </li>
        <!-- 循环 -->
        <li @click="upperonesong"><van-icon name="arrow-left" /></li>
        <!-- 上一首 -->
        <li class="play" @click="pauseplayback">
          <van-icon name="play-circle-o" v-if="!suspend" /><!-- 暂停 -->
          <van-icon name="pause-circle-o" v-if="suspend" /><!-- 播放 -->
        </li>
        <!-- 播放暂停 -->
        <li @click="loweronesong"><van-icon name="arrow" /></li>
        <!-- 下一首 -->
        <li @click="songlist"><van-icon name="ellipsis" /></li>
        <!-- 歌单列表 -->
      </ul>
    </div>
    <!-- 评论弹出层 -->
    <van-popup
      v-model="commentshow"
      position="bottom"
      :style="{ height: '100%' }"
      class="commentpopup"
    >
      <div class="commentpopup-top">
        <p>
          <span v-if="hotcomment" @click="closecomments"
            ><van-icon name="arrow-left"></van-icon>评论（{{
              hotcomment.length + normalcomments.length
            }}）</span
          >
        </p>
        <div v-if="listone.al" class="commentpopupdata">
          <img :src="listone.al.picUrl" alt="" />
          <span
            ><b>{{ listone.name }}</b
            >--<i>{{ listone.ar[0].name }}</i></span
          >
          <b>关注</b>
        </div>
      </div>
      <h4>评论区</h4>
      <ul class="comment">
        <li v-for="(item, index) in hotcomment" :key="item.user.userId + index">
          <p>
            <img :src="item.user.avatarUrl" alt="" />
            <span
              ><div>
                {{ item.user.nickname }}
                <!-- <span v-if="item.user.vipType">{{ item.user.vipType }}</span> -->
              </div>
              {{ item.timeStr }}</span
            ><i><b></b><van-icon name="good-job-o" /></i>
          </p>
          <div>
            <span>热评<van-icon name="fire-o" /></span>{{ item.content }}
          </div>
        </li>
      </ul>
      <ul class="comment">
        <li
          v-for="(item, index) in normalcomments"
          :key="item.user.userId + index"
        >
          <p>
            <img :src="item.user.avatarUrl" alt="" />
            <span
              ><div>
                {{ item.user.nickname }}
                <!-- <span v-if="item.user.vipType">{{ item.user.vipType }}</span> -->
              </div>
              {{ item.timeStr }}</span
            ><i><b></b><van-icon name="good-job-o" /></i>
          </p>
          <div>
            {{ item.content }}
          </div>
        </li>
      </ul>
      <div class="commentpopup-bottom">
        <input type="text" placeholder="听了这么多，可能你有话想说" /><van-icon
          name="smile-o"
        /><van-button type="default">发送</van-button>
      </div>
    </van-popup>
    <!-- 歌单列表弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '60%' }"
      class="songlist"
    >
      <div class="songlist-top">
        <h5>
          当前播放<span>({{ songlistdata.length }})</span>
        </h5>
        <p @click="loopplayback">
          <van-icon name="exchange" v-if="listloop"> 列表循环</van-icon
          ><!-- 列表循环 -->
          <van-icon name="replay" v-if="sequentialcycle"> 顺序循环</van-icon
          ><!-- 顺序循环 -->
          <i v-if="oneloop">① 单曲播放</i
          ><!-- 单曲播放 -->
          <span
            ><van-icon name="down" /><van-icon name="send-gift-o" /><van-icon
              name="delete-o"
          /></span>
        </p>
      </div>
      <ul class="songlist-ul" v-if="listshowhide">
        <li
          v-for="(item, index) in songlistdata"
          :key="item.id"
          @click="cutsong(item.id, index)"
          :class="{ gaoliang: item.id == id }"
        >
          <p>
            <em v-show="item.id == id"><van-icon name="service-o" /></em>
            <span>{{ item.name }}</span>
            <b v-if="item.ar">- {{ item.ar[0].name }}</b>
          </p>
          <van-icon name="cross" />
        </li>
      </ul>
      <ul class="songlist-ul" v-if="!listshowhide">
        <li
          v-for="(item, index) in songlistdata"
          :key="item.data.id + index"
          @click="cutsong(item.data.id, index)"
          :class="{
            gaoliang: item.data.id == IndividualsongID || item.data.id == id,
          }"
        >
          <em v-show="item.data.id == IndividualsongID || item.data.id == id"
            ><van-icon name="service-o"
          /></em>
          <span>{{ item.data.name }}</span>
          <b v-if="item.data.ar">- {{ item.data.ar[0].name }}</b>
          <van-icon name="cross" />
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { setSong, getSong } from "../../utils/auth";

export default {
  data() {
    return {
      yuanyuan: true,
      IndividualsongID: "", //外部点入传入的id
      id: "", //歌曲id
      listId: "", //歌单id
      NextsongID: "", //存放上一首或者下一首歌的id
      listone: {}, //对应歌曲的信息
      listloop: false, //列表循环
      sequentialcycle: true, //顺序循环
      oneloop: false, //单曲播放
      suspend: false, //播放/暂停、以及控制磁针的打开与放置
      showAnimate: false, //中间圆形磁盘旋转与暂停
      musicPath: "", // mp3链接
      progress: 0, //进度条使用
      is_stop: false, //暂停与播放
      duration: 0, //歌曲总时长
      curr: 0, //歌曲当前播放时间
      like: false, //喜欢
      commentshow: false, //评论弹出层
      listshowhide: false, //歌单列表不同传入方式的切换
      show: false, //歌曲列表弹出框
      songlistdata: [], //存放歌单列表数据
      hotcomment: [], //热评
      normalcomments: [], //正常评论
      storelyricsarr: [], //存放歌词的数组
      storelyritimecsarr: [], //存放歌词时间的数组
      lasttwo: "", //上两句
      theprevious: "", //上一句
      currentlyrics: "", //当前歌词
      nextsentence: "", //下一句
      nexttwosentences: "", //下两句
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},
  methods: {
    /* 键盘事件 
    methods: {
      handleWatchEnter(e) {
        var key = window.event ? e.keyCode : e.which;
        console.log(key);
        if (key === 32) {
          // 这里执行相应的行为动作
          console.log("空格点击了");
        }
      },
    }
    mounted() {
      const that = this;
      document.addEventListener("keydown", that.handleWatchEnter);
    }, */
    //秒数转化为mm:ss形式
    toTime(sec) {
      let s = sec % 60 < 10 ? "0" + (sec % 60) : sec % 60;
      let min =
        Math.floor(sec / 60) < 10
          ? "0" + Math.floor(sec / 60)
          : Math.floor(sec / 60);
      return min + ":" + s;
    },
    //音频进度改变时触发
    async getCurr() {
      if (this.$refs.audio) {
        this.curr = parseInt(this.$refs.audio.currentTime);
        this.progress = (this.curr / this.duration) * 100;
        this.storelyritimecsarr.forEach((item, index) => {
          //判断当前播放时间等于对应歌词时间时改变歌词
          if (this.toTime(this.curr) == item) {
            if (this.storelyricsarr[index - 2] != undefined) {
              this.lasttwo = this.storelyricsarr[index - 2];
            }
            if (this.storelyricsarr[index - 1] != undefined) {
              this.theprevious = this.storelyricsarr[index - 1];
            }
            this.currentlyrics = this.storelyricsarr[index];
            if (this.storelyricsarr[index + 1] != undefined) {
              this.nextsentence = this.storelyricsarr[index + 1];
            }
            if (this.storelyricsarr[index + 2] != undefined) {
              this.nexttwosentences = this.storelyricsarr[index + 2];
            }
          }
        });
        if (parseInt(this.$refs.audio.duration)) {
          //判断当前时间等于总时长时说明已播放完毕执行下一首
          if (this.toTime(this.duration) == this.toTime(this.curr)) {
            this.loweronesong();
          }
        }
      }
    },
    //音频加载成功后获取时长
    showLong() {
      this.duration = parseInt(this.$refs.audio.duration);
      //判断音频加载成功后自动播放
      if (parseInt(this.$refs.audio.duration)) {
        this.suspend = true; //播放/暂停按钮
        this.showAnimate = true; //磁盘磁针动画的开启与关闭
        this.is_stop = true; //audio的暂停/播放
        if (this.$refs.audio.play()) {
          this.$refs.audio.play(); //执行audio播放
        }
      }
    },
    //手动改变进度条
    changeLong() {
      let ct = (this.progress * this.duration) / 100;
      if (!isNaN(ct)) {
        this.$refs.audio.currentTime = ct;
        //遍历存放歌词时间的数组
        this.storelyritimecsarr.forEach((item, index) => {
          //判断当前时间等于歌词时间时
          if (this.toTime(this.curr) == item) {
            this.currentlyrics = this.storelyricsarr[index];
          }
        });
        if (parseInt(this.$refs.audio.duration)) {
          //判断当前时间等于总时长时说明已播放完毕执行下一首
          if (this.toTime(this.duration) == this.toTime(this.curr)) {
            this.loweronesong();
          }
        }
      }
    },
    //返回
    onClickLeft() {
      Toast("返回");
      this.$parent.getpublicplayerdata(); //返回执行父元素的公用播放器
      this.$router.go(-1);
    },
    //分享
    onClickRight() {
      Toast("分享");
    },
    yuanyuanclick() {
      if (this.currentlyrics) {
        this.yuanyuan = !this.yuanyuan;
      }
    },
    //点赞
    fabulous() {
      this.like = !this.like;
    },
    //获取评论的热评和普通评论
    async tocomment() {
      this.commentshow = true;
      const result = await axios.get(
        `http://192.168.31.27:3000/comment/music?${this.param}&id=${
          this.id || this.IndividualsongID
        }&limit=100&timestamp=${new Date().getTime()}`,
        {
          withCredentials: true,
        }
      );
      //拿出数据放入对应数组内
      this.hotcomment = result.data.hotComments; //热评
      this.normalcomments = result.data.comments; //普通评论
    },
    //评论区返回箭头
    closecomments() {
      this.commentshow = false;
    },
    //切换播放模式
    loopplayback() {
      if (this.listloop) {
        //列表循环
        this.sequentialcycle = true;
        this.listloop = false;
        this.oneloop = false;
      } else if (this.sequentialcycle) {
        //顺序循环
        this.sequentialcycle = false;
        this.listloop = false;
        this.oneloop = true;
      } else if (this.oneloop) {
        //单曲循环
        this.sequentialcycle = false;
        this.listloop = true;
        this.oneloop = false;
      }
    },
    //取到cookie
    async huoqucookie() {
      //判断是单曲进入播放器
      if (this.IndividualsongID != undefined) {
        this.listshowhide = false; //歌单列表不同传入方式的切换
        //获取单首歌曲详情
        const results = await axios.get(
          `http://192.168.31.27:3000/song/detail?${this.param}&ids=${
            this.IndividualsongID
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        if (results.data.songs) {
          this.listone = results.data.songs[0]; //存放当前播放歌曲的数据
        }
        //拿到歌曲id调取歌曲的url地址
        const resulturl = await axios.get(
          `http://192.168.31.27:3000/song/url?${this.param}&id=${
            this.IndividualsongID
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        if (resulturl.data.data[0].url) {
          this.musicPath = resulturl.data.data[0].url; //拿出url
        }
        //获取歌词
        const resultlyric = await axios.get(
          `http://192.168.31.27:3000/lyric?${this.param}&id=${
            this.IndividualsongID
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        //清空歌词、歌词时间、当前歌词，避免出现上一首歌词再次出现
        this.storelyricsarr = []; //歌词
        this.storelyritimecsarr = []; //歌词时间
        this.lasttwo = ""; //上两句
        this.theprevious = ""; //上一句
        this.currentlyrics = ""; //当前歌词
        this.nextsentence = ""; //下一句
        this.nexttwosentences = ""; //下两句
        //通过遍历截取拿到歌词时间和对应时间的歌词存入不同数组
        resultlyric.data.lrc.lyric.split("[").map((e) => {
          if (e) {
            this.storelyricsarr.push(e.split("]")[1]); //存放歌词
            this.storelyritimecsarr.push(e.split("]")[0].split(".")[0]); //存放歌词时间
          }
        });
        //遍历存放歌词时间的数组
        this.storelyritimecsarr.forEach((item, index) => {
          //判断当前播放时间与歌词时间相同时将对应索引值的歌词取出来展示
          if (this.toTime(this.curr) == item) {
            if (this.storelyricsarr[index - 2] != undefined) {
              this.lasttwo = this.storelyricsarr[index - 2];
            }
            if (this.storelyricsarr[index - 1] != undefined) {
              this.theprevious = this.storelyricsarr[index - 1];
            }
            this.currentlyrics = this.storelyricsarr[index]; //当前播放时间的歌词
            if (this.storelyricsarr[index + 1] != undefined) {
              this.nextsentence = this.storelyricsarr[index + 1];
            }
            if (this.storelyricsarr[index + 2] != undefined) {
              this.nexttwosentences = this.storelyricsarr[index + 2];
            }
          }
        });
        //调取最近播放的歌单
        const result = await axios.get(
          `http://192.168.31.27:3000/record/recent/song?${
            this.param
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        this.songlistdata = result.data.data.list; //最近播放的数据存入数组
        this.songlistdata.unshift({ data: this.listone });
      }
      //判断歌单歌曲id的cookie存在的时候
      else if (getSong()) {
        this.listshowhide = true;
        const songinformation = JSON.parse(getSong()); //取到对应对应的歌单id和歌曲id
        this.id = songinformation.songId; //歌曲id
        this.listId = songinformation.listId; //歌单id
        //调取歌单列表
        const results = await axios.get(
          `http://192.168.31.27:3000/playlist/track/all?${this.param}&id=${
            this.listId
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        this.songlistdata = results.data.songs; //将歌单列表存入数组
        //遍历出是当前歌曲id的音乐
        results.data.songs.forEach((item) => {
          if (this.id == item.id) {
            this.listone = item; //取出单条的数据存
          }
        });
        //拿到歌曲id调取歌曲的url地址
        const resulturl = await axios.get(
          `http://192.168.31.27:3000/song/url?${this.param}&id=${
            this.id
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        if (resulturl.data.data[0].url) {
          this.musicPath = resulturl.data.data[0].url; //拿出url
        }
        //获取歌词
        const resultlyric = await axios.get(
          `http://192.168.31.27:3000/lyric?${this.param}&id=${
            this.id
          }&timestamp=${new Date().getTime()}`,
          {
            withCredentials: true,
          }
        );
        //清空歌词、歌词时间、当前歌词
        this.storelyricsarr = []; //歌词
        this.storelyritimecsarr = []; //歌词时间
        this.lasttwo = ""; //上两句
        this.theprevious = ""; //上一句
        this.currentlyrics = ""; //当前歌词
        this.nextsentence = ""; //下一句
        this.nexttwosentences = ""; //下两句
        //通过遍历截取拿到歌词、歌词时间存入数组
        resultlyric.data.lrc.lyric.split("[").map((e) => {
          if (e) {
            this.storelyricsarr.push(e.split("]")[1]); //存放歌词
            this.storelyritimecsarr.push(e.split("]")[0].split(".")[0]); //存放歌词时间
          }
        });
        //遍历存放歌词时间的数组
        this.storelyritimecsarr.forEach((item, index) => {
          //判断当前播放时间与歌词时间相同时将对应索引值的歌词取出来展示
          if (this.toTime(this.curr) == item) {
            if (this.storelyricsarr[index - 2] != undefined) {
              this.lasttwo = this.storelyricsarr[index - 2];
            }
            if (this.storelyricsarr[index - 1] != undefined) {
              this.theprevious = this.storelyricsarr[index - 1];
            }
            this.currentlyrics = this.storelyricsarr[index]; //当前播放时间的歌词
            if (this.storelyricsarr[index + 1] != undefined) {
              this.nextsentence = this.storelyricsarr[index + 1];
            }
            if (this.storelyricsarr[index + 2] != undefined) {
              this.nexttwosentences = this.storelyricsarr[index + 2];
            }
          }
        });
      }
    },
    //上一首
    upperonesong() {
      this.suspend = false; //播放、暂停按钮
      this.is_stop = false; //音乐播放器暂停、播放
      this.showAnimate = false; //磁盘磁针动画暂停、开始
      //判断是单首歌曲进入音乐播放器
      if (this.IndividualsongID != undefined) {
        //遍历歌曲列表
        this.songlistdata.forEach((item, index) => {
          //判断歌曲id与列表数据的id相同时
          if (this.IndividualsongID == item.data.id) {
            //清空原歌词数据
            this.storelyricsarr = []; //歌词
            this.storelyritimecsarr = []; //歌词时间
            this.lasttwo = ""; //上两句
            this.theprevious = ""; //上一句
            this.currentlyrics = ""; //当前歌词
            this.nextsentence = ""; //下一句
            this.nexttwosentences = ""; //下两句
            //判断时当前播放为第一首需要切换到列表最后一首
            if (index <= 0) {
              this.NextsongID =
                this.songlistdata[this.songlistdata.length - 1].data.id; //上一首的id
            } else {
              //否则就跳到上一首
              this.NextsongID = this.songlistdata[index - 1].data.id; //上一首的id
            }
          }
        });
        this.IndividualsongID = this.NextsongID; //将上一首歌曲id赋值给需要播放歌曲使用的
      } else {
        //否则就是在歌单进入播放器的，遍历歌曲列表
        this.songlistdata.forEach((item, index) => {
          //判断歌曲id与列表数据的id相同时
          if (this.id == item.id) {
            //清空原歌词数据
            this.storelyricsarr = []; //歌词
            this.storelyritimecsarr = []; //歌词时间
            this.lasttwo = ""; //上两句
            this.theprevious = ""; //上一句
            this.currentlyrics = ""; //当前歌词
            this.nextsentence = ""; //下一句
            this.nexttwosentences = ""; //下两句
            //判断时当前播放为第一首需要切换到列表最后一首
            if (index <= 0) {
              const songId = this.songlistdata[this.songlistdata.length - 1].id; //上一首的id
              const song = {
                listId: this.listId,
                songId,
              };
              setSong(JSON.stringify(song)); //更新cookie中的数据用于播放
              this.listone = this.songlistdata[this.songlistdata.length - 1]; //更换当前歌曲数据
            } else {
              const songId = this.songlistdata[index - 1].id; //上一首的id
              const song = {
                listId: this.listId,
                songId,
              };
              setSong(JSON.stringify(song)); //更新cookie中的数据用于播放
              this.listone = this.songlistdata[index - 1]; //更换当前歌曲数据
            }
          }
        });
      }
      this.huoqucookie(); //重新调用播放需要的所有数据
    },
    //下一首
    loweronesong() {
      this.suspend = false; //播放、暂停按钮
      this.is_stop = false; //音乐播放器暂停、播放
      this.showAnimate = false; //磁盘磁针动画暂停、开始
      //判断是单首歌曲进入音乐播放器
      if (this.IndividualsongID != undefined) {
        //遍历歌曲列表
        this.songlistdata.forEach((item, index) => {
          //判断歌曲id与列表数据的id相同时
          if (this.IndividualsongID == item.data.id) {
            //清空原歌词数据
            this.storelyricsarr = []; //歌词
            this.storelyritimecsarr = []; //歌词时间
            this.lasttwo = ""; //上两句
            this.theprevious = ""; //上一句
            this.currentlyrics = ""; //当前歌词
            this.nextsentence = ""; //下一句
            this.nexttwosentences = ""; //下两句
            //判断时当前播放为最后一首需要切换到列表第一首
            if (index >= this.songlistdata.length - 1) {
              this.NextsongID = this.songlistdata[0].data.id; //下一首的id
            } else {
              //否则就跳到下一首
              this.NextsongID = this.songlistdata[index + 1].data.id; //下一首的id
            }
          }
        });
        this.IndividualsongID = this.NextsongID; //将下一首歌曲id赋值给需要播放歌曲使用的
      } else {
        //否则就是在歌单进入播放器的，遍历歌曲列表
        this.songlistdata.forEach((item, index) => {
          if (this.id == item.id) {
            //清空原歌词数据
            this.storelyricsarr = []; //歌词
            this.storelyritimecsarr = []; //歌词时间
            this.lasttwo = ""; //上两句
            this.theprevious = ""; //上一句
            this.currentlyrics = ""; //当前歌词
            this.nextsentence = ""; //下一句
            this.nexttwosentences = ""; //下两句
            //判断时当前播放为最后一首需要切换到列表第一首
            if (index >= this.songlistdata.length - 1) {
              const songId = this.songlistdata[0].id; //下一首的id
              const song = {
                listId: this.listId,
                songId,
              };
              setSong(JSON.stringify(song)); //更新cookie中的数据用于播放
              this.listone = this.songlistdata[0];
            } else {
              const songId = this.songlistdata[index + 1].id; //下一首的id
              const song = {
                listId: this.listId,
                songId,
              };
              setSong(JSON.stringify(song)); //更新cookie中的数据用于播放
              this.listone = this.songlistdata[index + 1];
            }
          }
        });
      }
      this.huoqucookie(); //重新调用播放需要的所有数据
    },
    //暂停/播放
    pauseplayback() {
      this.suspend = !this.suspend; //暂停、播放按钮取反
      if (this.suspend) {
        this.showAnimate = true;
        this.is_stop = true;
      } else {
        this.is_stop = false;
        this.showAnimate = false;
      }
      if (this.is_stop) {
        if (this.$refs.audio.play()) {
          this.$refs.audio.play(); //播放
        }
      } else {
        this.$refs.audio.pause(); //暂停
      }
    },
    //点击歌单列表
    songlist() {
      this.show = true;
    },
    //点击歌单列表里的某个歌切换播放的歌曲
    cutsong(songId) {
      //判断是单首歌曲进入音乐播放器
      if (this.IndividualsongID != undefined) {
        this.IndividualsongID = songId; //对应点击的歌曲id
      } else {
        this.id = songId; //对应点击的歌曲id
        const song = {
          listId: this.listId,
          songId,
        };
        setSong(JSON.stringify(song)); //更新cookie中的数据用于播放
      }
      this.show = false; //隐藏歌曲列表面板
      this.huoqucookie(); //重新调用播放需要的所有数据
    },
  },
  created() {
    this.IndividualsongID = this.$route.params.id; //取到单首进入播放器歌曲id
  },
  mounted() {
    this.huoqucookie(); //自执行
  },
  components: {},
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
.playpage {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #161824 center;
}
.playpage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(39, 39, 39, 0.7);
}
header {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
  color: rgb(209, 207, 207);
}
header span {
  height: 50px;
  line-height: 50px;
  font-size: 30px;
}
header div {
  text-align: center;
  padding: 10px 0;
}
header div p {
  font-weight: bolder;
  font-size: 20px;
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main {
  flex: 1;
  margin-top: 60px;
  height: 60%;
  position: relative;
}
.yuanyuan {
  text-align: center;
  padding-top: 100px;
  position: relative;
}
.yuanyuan > img {
  position: absolute;
  top: 0;
  left: 47%;
  height: 150px;
  transform-origin: top left;
  transition: 1s;
  z-index: 1;
  margin: 10px 0 0 -10px;
}
.yuanyuan span {
  display: block;
  margin: 0 auto;
  /* height: 200px; */
  width: 50vw;
  height: 50vw;
  border: 10vw solid black;
  border-radius: 50%;
  overflow: hidden;
}
.yuanyuan span img {
  width: 100%;
  height: 100%;
}
.rotate30 {
  transform: rotateZ(-30deg);
}
.rotate360 {
  animation: rotate360 7s linear 0.2s infinite;
}
@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
.yuanyuan p {
  color: rgba(128, 139, 139, 0.6);
  margin: 10px 0;
}
/* 歌词展示区域 */
.lyricsdisplay {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.lyricsdisplay p {
  line-height: 1.5;
  position: relative;
  color: rgba(128, 139, 139, 0.6);
}
.lyricsdisplay .currentshowlyrics {
  color: #fff9;
  line-height: 1.5;
  font-size: 22px;
}
/* 评论弹出层 */
.commentpopup .commentpopup-top,
.commentpopup .commentpopup-bottom {
  position: fixed;
  width: 100%;
  background-color: white;
  z-index: 222;
}
.commentpopup .commentpopup-top span {
  margin: 6px 0;
  display: inline-block;
}
.commentpopup .commentpopup-bottom {
  bottom: -3px;
  display: flex;
  justify-content: space-around;
  height: 40px;
  color: rgba(128, 139, 139, 0.6);
}
.commentpopup .commentpopup-bottom input {
  border: none;
  flex: 1;
  width: 100%;
  margin-left: 10px;
}
.commentpopup .commentpopup-bottom button {
  border: none;
  height: 40px;
}
.commentpopup .commentpopup-bottom i {
  line-height: 40px;
  margin: 0 10px;
}
.commentpopup > p {
  font-size: 20px;
  line-height: 20px;
}
.commentpopup > p i {
  font-size: 20px;
  margin: 4px 10px;
}
.commentpopup .commentpopupdata {
  box-sizing: border-box;
  padding: 10px 10px;
  display: flex;
  line-height: 50px;
  border-bottom: 2px solid rgb(223, 222, 222);
}
.commentpopup .commentpopupdata img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
}
.commentpopup .commentpopupdata span {
  width: 70%;
  display: flex;
  justify-content: left;
}
.commentpopup .commentpopupdata span b {
  margin-left: 4px;
  display: inline-block;
  font-size: 18px;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commentpopup .commentpopupdata span i {
  font-size: 12px;
  color: gray;
}
.commentpopup .commentpopupdata > b {
  color: red;
}
.commentpopup > h4 {
  box-sizing: border-box;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 110px;
}
.comment {
  box-sizing: border-box;
  padding: 0 10px;
  background-color: aliceblue;
}
.comment li {
  padding: 6px 0;
  margin: 2px;
  background-color: white;
}
.comment li > p {
  display: flex;
  justify-content: left;
  position: relative;
}
.comment li > p img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.comment li > p span {
  font-size: 12px;
  color: gray;
  margin-left: 4px;
}
.comment li > p span div {
  font-size: 18px;
  color: black;
}
.comment li > p i {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
}
.comment li > div {
  width: 80%;
  margin-left: 10%;
  margin-top: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: #0009;
  overflow: hidden;
}
.comment li > div span {
  background-color: red;
  color: white;
  padding: 2px 6px;
  margin: 0 4px;
  border-radius: 20px;
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  color: rgb(209, 207, 207);
}
.likeicon {
  display: flex;
  justify-content: center;
}
.likeicon li {
  width: 10%;
  text-align: center;
}
.likeicon li i {
  font-size: 20px;
}
audio {
  width: 300px;
  height: 100px;
}
.time {
  display: flex;
  justify-content: space-evenly;
  margin: 20px 0;
}
.time span {
  width: 10%;
}
.time div {
  width: 70%;
  margin-top: 8px;
}
.bottom-ico {
  text-align: center;
  display: flex;
  justify-content: center;
  line-height: 50px;
}
.bottom li {
  width: 15%;
}
.bottom .play i {
  font-size: 50px;
  line-height: 40px;
}
.bottom i,
.bottom b {
  font-size: 30px;
}
.bottom b {
  font-weight: normal;
  line-height: 20px;
}
/* 歌单列表 */
.songlist {
  width: 90%;
  left: 5%;
  bottom: 3%;
  border-radius: 3%;
  box-sizing: border-box;
  padding: 0 10px;
  background-color: #1b242d;
  color: #e5e8ea;
}
.songlist .songlist-top {
  width: 83%;
  padding-bottom: 8px;
  position: inherit;
  background-color: #1b242d;
  z-index: 222;
  box-sizing: border-box;
  border-bottom: 2px solid #252c36;
}
.songlist .songlist-top h5 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: bolder;
  padding-top: 30px;
  letter-spacing: 2px;
  color: #d5dada;
}
.songlist .songlist-top h5 span {
  font-size: 18px;
  color: #484f58;
}
.songlist .songlist-top p {
  line-height: 30px;
}
.songlist .songlist-top p > i {
  color: #484f58;
}
.songlist .songlist-top p span {
  float: right;
  margin-right: 10px;
  font-size: 24px;
}
.songlist .songlist-top p span i {
  margin: 0 10px;
  color: #484f58;
}
.songlist-ul .gaoliang p {
  color: #45bf84;
}
.songlist-ul .gaoliang b {
  color: #45bf84;
}
.songlist .songlist-ul {
  margin-top: 90px;
}
.songlist-ul li {
  /* height: 40px; */
  width: 85%;
  line-height: 40px;
  padding: 5px 0 5px 10px;
  position: relative;
  border-bottom: 2px solid #252c36;
}
.songlist-ul li p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c6d3d6;
}
.songlist-ul li em {
  padding: 0 6px;
}
.songlist-ul li span {
  font-size: 16px;
}
.songlist-ul li b {
  font-size: 12px;
  color: #484f58;
  margin: 0 10px;
}
.songlist-ul li > i {
  color: gray;
  /* float: right; */
  position: absolute;
  right: -30px;
  top: 0px;
  line-height: 40px;
}
</style>
